<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab标签切换样式</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./res/layui/css/layui.css" media="all">
<script src="./js/jq3/jquery.min.js" charset="utf-8"></script>
<script src="./res/layui/layui.all.js" charset="utf-8"></script>
<style>
.layui-upload-img{width:100px;margin-left:10px;}
</style>
</head>
<body>
<div>
	<h1>即时通讯展示</h1>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>即时信息示例</legend>
</fieldset>
 <div id="message">
 
 <div>
<div class="site-demo-button">
   <textarea placeholder="请输入内容" id="msgTxt" class="layui-textarea"></textarea>
   <button class="layui-btn site-demo-layim" data-type="btnmsg">自定义会话</button>
  
</div> 
              
<script>
	$(function(){
	    layui.use(['carousel', 'form'], function(){
	    	var carousel = layui.carousel,
	    	layer = layui.layer,
  				form = layui.form;
  			var active = {
  				btnmsg : function(){
  					var msg = $("#msgTxt").val();
  					var data = dateF(new Date(),"%yyyy-%MM-%dd %hh:%nn:%ss");
  					if(msg.trim() != ''){
	  					var html = "<div><p><span>张三 "+data+" </span></p><p>"+msg+"</p></div>";
	  					$("#message").append(html);
	  					$("#msgTxt").val('');
	  					openMsg(msg);
  					}else{
  						layer.msg("不能发送空信息！");
  					}
  				}
  			};
  			$(".site-demo-layim").on('click',function(){
  				var othis = $(this);
  				var type = othis.data('type');
  				active[type] ? active[type].call(this, othis) : '';
  			});	
		});
		
		});	
	function openMsg(msg){
		$.ajax({
			url: "/test-layui/deliveryMsg",
			data: {'msg':msg},
			type: "post",
			dataType: "json",
			success: function (result) {				
				console.log(result);
			},
			error: function(xhr,status,error){
				
			}
		});
	}
	function dateFormat(str){
		var year = str.getFullYear();
		var month = str.getMonth()+1;
		var day = str.getDate();
		var hours = str.getHours();
		var minu = str.getMinutes();
		var second = str.getSeconds();
		
	}
	function dateF(date,str){
		var obj = {
			"yyyy":	date.getFullYear(),
			"MM": date.getMonth()+1,
			"dd": date.getDate(),
			"hh": date.getHours(),
			"nn": date.getMinutes(),
			"ss": date.getSeconds()
		};
		var arr = str.split('%');
		var rtnStr = "";
		for(var i=0;i<arr.length;i++){
			var s = arr[i];
			if(s != '' && s!=null && s.indexOf('yyyy')>-1){
				var y = obj['yyyy'];
				var ss = s.replace('yyyy',y);
				rtnStr += ss;
			}else if(s != '' && s!=null && s.indexOf('MM')>-1){
				var m = obj['MM'];
				var ss = s.replace('MM',m);
				rtnStr += ss;
			}else if(s != '' && s!=null && s.indexOf('dd')>-1){
			 	var d = obj['dd'];
				var ss = s.replace('dd',d);
				rtnStr += ss;
			}else if(s != '' && s!=null && s.indexOf('hh')>-1){
				var h = obj['hh'];
				var ss = s.replace('hh',h);
				rtnStr += ss;
			}else if(s != '' && s!=null && s.indexOf('nn')>-1){
				var n = obj['nn'];
				var ss = s.replace('nn',n);
				rtnStr += ss;
			}else if(s != '' && s!=null && s.indexOf('ss')>-1){
				var a = obj['ss'];
				var ss = s.replace('ss',a);
				rtnStr += ss;
			}
		}
		var aaaa = rtnStr;
		if(rtnStr.substring(rtnStr.length-1) == "："){
			aaaa = rtnStr.substring(0,rtnStr.length-1);
		}
		return aaaa;
	}
</script>
<body>
</html>
